<template>
	<view class="home">
		<swiper :interval="3000" :duration="1000" class="swiper-box" next-margin="20px" previous-margin="20rpx"
			@change="handleChange">
			<swiper-item v-for="(item,index) in list" :key="index">
				<image :src="$wanlshop.oss(item.image)" mode=""></image>
			</swiper-item>

		</swiper>
		<view class="vip-title">特权对比</view>
		<table class="table">
			<thead class="thead">
				<th>服务内容</th>
				<th v-for="(item,index) in list" :key="index">{{item.name}}</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
          <td>店铺管理</td>
          <td>
            <image src="/static/images/user/vip_check_n.png" class="icon_check"></image>
          </td>
          <td>
            <image src="/static/images/user/vip_check_y.png" class="icon_check"></image>
          </td>
          <td>
            <image src="/static/images/user/vip_check_y.png" class="icon_check"></image>
          </td>
          <td>
            <image src="/static/images/user/vip_check_y.png" class="icon_check"></image>
          </td>
        </tr> -->
				<tr>
					<td>直推有效用户</td>
					<td :class="item.id == id?'red-text':''" v-for="(item,index) in list" :key="index">{{item.share_user_num}}
					</td>
				</tr>
				<tr>
					<td>团队有效用户</td>
					<td :class="item.id == id?'red-text':''" v-for="(item,index) in list" :key="index">{{item.team_user_num}}</td>
				</tr>
				<tr>
					<td>团队业绩</td>
					<td :class="item.id == id?'red-text':''" v-for="(item,index) in list" :key="index">{{item.user_rush_money}}
					</td>
				</tr>
				<tr>
					<td>价格</td>
					<td :class="item.id == id?'red-text':''" v-for="(item,index) in list" :key="index">
						{{item.user_contract_money}}
					</td>
				</tr>
				<tr>
					<td>团队奖</td>
					<td :class="item.id == id?'red-text':''" v-for="(item,index) in list" :key="index">{{item.team_get}}</td>
				</tr>
			</tbody>
		</table>
		<view class="vip-btn" @click="handleModel">立即激活</view>
		<view class="model-mask" v-if="show" @click="show = false">
			<view class="model" @click.stop="">
				<view class="model-title">开通会员</view>
				<view>
					<text class="model-label">{{list[current].name}}</text>
					<text class="model-price">￥{{list[current].user_contract_money}}</text>
				</view>
				<view class="model-btn" @click="levelOrder">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [],
				id: '',
				current: 0
			};
		},
		onLoad() {
			this.vipList()
		},
		methods: {
			levelOrder() {
				uni.request({
					url: '/wanlshop/user/levelOrder',
					method: 'POST',
					data: { level_id: this.id },
					success: ({ res }) => {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							mask: true
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			},
			handleChange(e) {
				console.log(e)
				this.current = e.detail.current
				this.id = this.list[e.detail.current].id
			},
			// 会员列表
			vipList() {
				uni.request({
					url: '/wanlshop/user/levelList',
					method: 'GET',
					success: ({ res }) => {
						console.log(res)
						this.list = res.data.list
						this.id = this.list[0].id
					}
				})
			},
			handleModel() {
				this.show = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		background: #fff;
		min-height: 100vh;
		padding: 56rpx 26rpx;
	}

	.swiper-box {
		height: 320rpx;

		image {
			width: 624rpx;
			height: 320rpx;
		}
	}

	.vip-title {
		margin: 40rpx 0;
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.table {
		width: 100%;
		border-collapse: collapse;

		th {
			background: #f5f5f5;
			padding: 24rpx 0;
			font-size: 24rpx;
			color: #333;
			text-align: center;
		}

		td {
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #333;
			font-weight: 500;
			text-align: center;
		}

		tr {
			background: #D9E7F3;
		}

		tr:nth-child(2n) {
			background: none;
		}

		.red-text {
			color: #ff1111;
		}

		.icon_check {
			width: 40rpx;
			height: 40rpx;
			vertical-align: sub;
		}
	}

	.vip-btn {
		width: 660rpx;
		height: 92rpx;
		background: linear-gradient(270deg, #EF430F 0%, #F17E19 100%);
		border-radius: 12rpx;
		text-align: center;
		line-height: 92rpx;
		margin: 98rpx auto;
		color: #fff;
		font-size: 32rpx;
	}

	.model-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);

		.model {
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			position: absolute;
			top: 0;
			left: 0;
			margin: auto;
			bottom: 0;
			right: 0;
			width: 660rpx;
			height: 408rpx;
			animation: fade-in 0.3s ease-in-out forwards;

			&-title {
				font-size: 32rpx;
				font-weight: 800;
				color: #333;
				text-align: center;
				margin-bottom: 90rpx;
			}

			&-label {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}

			&-price {
				font-size: 32rpx;
				font-weight: 500;
				color: #ff1111;
				float: right;
			}

			&-btn {
				width: 600rpx;
				height: 84rpx;
				background: linear-gradient(270deg, #EF430F 0%, #F17E19 100%);
				border-radius: 12rpx;
				text-align: center;
				line-height: 84rpx;
				color: #fff;
				margin-top: 66rpx;
			}
		}
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
			transform: scale(.5);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>